<template>
  <div class="review">
    <!-- 评论卡 -->
    <van-card
      v-if="item != null"
      class="card"
      :title="item.name"
      :desc="item.info"
      :num="item.count"
      :thumb="'data:image;base64,' + item.images[0]"
      :price="item.current_price"
    />

    <van-panel :title="isReviewed ? '已评价' : '未评价'">
      <van-rate
        style="padding:10px 16px;"
        v-model="star"
        :count="5"
        :size="22"
        color="#ee0a24"
        void-icon="star"
        void-color="#eee"
        :readonly="isReviewed"
      />
      <van-field
        rows="5"
        label="评论"
        v-model="remark"
        type="textarea"
        placeholder="请输入评论"
        autosize
        :readonly="isReviewed"
      />
    </van-panel>
    <!-- 提交与删除按钮 -->
    <div style="padding: 15px;">
      <van-button
        v-if="!isReviewed"
        size="large"
        round
        type="primary"
        @click="onReviewClick"
        >提交</van-button
      >
      <van-button
        v-else-if="isReviewed"
        size="large"
        round
        type="danger"
        @click="onDeleteClick"
        >删除</van-button
      >
    </div>
  </div>
</template>

<script>
import { Rate, Panel, Field, Button, Toast, Card } from "vant"
import { axios, API_URL } from "../../api"
export default {
  components: {
    [Card.name]: Card,
    [Rate.name]: Rate,
    [Panel.name]: Panel,
    [Field.name]: Field,
    [Button.name]: Button
  },
  data() {
    return {
      isReviewed: false,
      star: 0,
      remark: "",
      item_id: null,
      customer_id: null,
      item: null
    }
  },
  methods: {
    onReviewClick() {
      axios
        .post(
          API_URL + "review/create",
          {
            item_id: this.$route.params.item_id,
            star: this.star,
            remark: this.remark
          },
          {
            headers: {
              Authorization: this.$store.state.customer_token
            }
          }
        )
        .then(() => {
          Toast("评价商品成功")
          this.$router.go(-1)
        })
        .catch(err => {
          console.error(err)
        })
    },
    onDeleteClick() {
      axios
        .post(
          API_URL + "review/create",
          {
            item_id: this.$route.params.item_id,
            star: this.star,
            remark: this.remark
          },
          {
            headers: {
              Authorization: this.$store.state.customer_token
            }
          }
        )
        .then(() => {
          Toast("评价商品成功")
          this.$router.go(-1)
        })
        .catch(err => {
          console.error(err)
        })
    },
    getReview(review_id) {
      axios
        .get(API_URL + "review/" + review_id, {})
        .then(response => {
          this.star = response.data.star
          this.remark = response.data.remark
          this.item_id = response.data.item_id
          this.customer_id = response.data.customer_id
          this.isReviewed = true
        })
        .catch(err => {
          console.error(err)
        })
    }
  },
  /* 预载评论信息 */
  mounted: function() {
    if (this.$route.params.review_id) {
      this.getReview(this.$route.params.review_id)
    } else if (this.$route.params.item_id) {
      axios
        .get(API_URL + "items/" + this.$route.params.item_id, {})
        .then(response => {
          this.item = {}
          this.item.name = response.data.name
          this.item.current_price = response.data.current_price
          this.item.info = response.data.info
          this.item.shop_id = response.data.shop_id
          this.item.images = response.data.images
        })
        .catch(err => {
          console.error(err)
        })

      axios
        .get(API_URL + "review/search", {
          params: {
            item_id: this.$route.params.item_id,
            customer_id: this.$store.state.customer_id
          }
        })
        .then(response => {
          if (response.data.review_ids.length > 0) {
            this.getReview(response.data.review_ids[0])
          }
        })
        .catch(err => {
          console.error(err)
        })
    }
  }
}
</script>
